<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>OS3 Grid Example 1</title>
	<link type="text/css" rel="stylesheet" href="css/examples.css" />
	<link type="text/css" rel="stylesheet" href="os3grid.css" />
	<script src="../../os3jslib/liwe.js" type="text/javascript"></script>
	<script src="../../os3jslib/string_enh.js" type="text/javascript"></script>
	<script src="os3grid.js" type="text/javascript"></script>
	


</head>
<body>
<div id="block_top">
	<h2 class="center">OS3Grid Example 1 - Simple Grid</h2>
	<h4 class="center">By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net</h4>
</div>

<div id="block_middle">
		<div class="result">

			<div id="grid"></div>
			<script type="text/javascript">
				// Create an OS3Grid instance
				var g = new OS3Grid ( 'grid' );

				// Grid Headers are the grid column names
				g.set_headers ( 'nick', 'Name', 'Surname', 'E-Mail Address', 'date' );

				// Now, we add some rows to the grid
				g.add_row ( 'fsoft', 'Fabio', 'Rotondo', 'fsoft (@) sourceforge (dot) net', new Date ( '1972/01/10' ) );
				g.add_row ( 'john', 'John', 'Bustone', 'jbust (@) somewhere (dot) net', new Date ( '1975/03/04' ) );
				g.add_row ( 'mkey', 'Mark', 'Key', 'mkey (@) okay (dot) net', new Date ( '2000/01/05' ) );
				g.set_col_align ( 0, "right" );
				g.add_row ( 'jdoe', 'John', 'Doe', 'redbull (@) batman (dot) net', new Date ( '1963/03/04' ) );

				g.set_col_render ( 4, function ( v, pos ) { return String.format ( "%02.2d-%02.2d-%4.4d", v.getDate (), v.getMonth () + 1, v.getFullYear () ); } );
				g.set_col_type ( 4, 'date' );

				g.sortable = true;

				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );
			</script>
		</div>
		<div id="grid"></div>
</div>

</body>
</html>

